<template>
  <div class="mainbox">
    <div class="panes">
      <div class="panes-item">
        <div class="panes-img-box">
          <img src="/img/people.png" />
        </div>
        <div class="panes-right-box">
          <div class="panes-label">New Visits</div>
          <div class="panes-data">{{ dashdata1.value }}</div>
        </div>
      </div>
      <div class="panes-item">
        <div class="panes-img-box">
          <img src="/img/message-fill.png" />
        </div>
        <div class="panes-right-box">
          <div class="panes-label">Messages</div>
          <div class="panes-data">{{ dashdata2.value }}</div>
        </div>
      </div>
      <div class="panes-item">
        <div class="panes-img-box">
          <img src="/img/money_bag_fill.png" />
        </div>
        <div class="panes-right-box">
          <div class="panes-label">Purchases</div>
          <div class="panes-data">{{ dashdata3.value }}</div>
        </div>
      </div>
      <div class="panes-item">
        <div class="panes-img-box">
          <img src="/img/cart.png" />
        </div>
        <div class="panes-right-box">
          <div class="panes-label">Shoppings</div>
          <div class="panes-data">{{ dashdata4.value }}</div>
        </div>
      </div>
    </div>
    <div class="table">
      <div ref="chartRef1" style="width: 100%; height: 100%" />
    </div>
    <div class="chart">
      <div ref="chartRef2" style="width: 32%; height: 100%" />
      <div ref="chartRef3" style="width: 32%; height: 100%" />
      <div ref="chartRef4" style="width: 32%; height: 100%" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ECharts, EChartsOption } from "echarts";
import { init } from "echarts";
import "echarts-gl";
import { onMounted, reactive, ref } from "vue";
import type { Ref } from "vue";
import { getData } from "@/api/dashboard";
import { ElMessage } from "element-plus";
import router from "@/router";
// 面板数据
let dashdata1 = reactive({ value: 0 });
let dashdata2 = reactive({ value: 0 });
let dashdata3 = reactive({ value: 0 });
let dashdata4 = reactive({ value: 0 });

// 表对象
let chart1: ECharts, chart2: ECharts, chart3: ECharts, chart4: ECharts;
// 表节点
const chartRef1: Ref<HTMLElement | null> = ref(null);
const chartRef2: Ref<HTMLElement | null> = ref(null);
const chartRef3: Ref<HTMLElement | null> = ref(null);
const chartRef4: Ref<HTMLElement | null> = ref(null);
// 表配置项
let option1: EChartsOption, option2: EChartsOption, option3: EChartsOption, option4: EChartsOption;
// 表数据赋值
const setOptionsData = (data:any) => {
  option1 = {
    grid: {
      left: '8%',
      right: '8%',
      bottom: '14%',
      top: '14%'
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: data.chartdata1,
        type: "line",
        smooth: true,
      },
    ],
  };
  option2 = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [12, 100],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 2
        },
        data: data.chartdata2
      }
    ]
  };
  option3 = {
    radar: {
      indicator: [
        { name: 'IRL', max: 6500 },
        { name: 'USA', max: 16000 },
        { name: 'AUT', max: 40000 },
        { name: 'CHN', max: 48000 },
        { name: 'GER', max: 58000 },
        { name: 'IRQ', max: 25000 }
      ]
    },
    series: [
      {
        type: 'radar',
        symbol: 'none',
        areaStyle: {

        },
        data: data.chartdata3
      }
    ]
  };
  option4 = {
    trigger: "axis",
    tooltip: {
      formatter: function (params: any) {
        return `peach: ${params.data[0]}<br />
                    apple: ${params.data[1]}<br />
                    orange: ${params.data[2]}<br />`;
      },
    },
    axisPointer: {
      type: "cross",
    },
    grid3D: {},
    xAxis3D: {
      name: "peach",
      nameTextStyle: {
        fontSize: 14,
      },
      type: "value",
      scale: true,
    },
    yAxis3D: {
      name: "apple",
      nameTextStyle: {
        fontSize: 14,
      },
      type: "value",
      scale: true,
    },
    zAxis3D: {
      name: "orange",
      nameTextStyle: {
        fontSize: 14,
      },
      type: "value",
      scale: true,
    },
    dataset: {
      source: data.chartdata4,
    },
    series: [
      {
        name: "对比",
        type: "scatter3D",
        symbolSize: 2.5,
        encode: {
          x: "x",
          y: "y",
          z: "z",
          tooltip: [0, 1, 2, 3, 4, 5],
        },
        itemStyle: {
          color: function (params: any): any {
            let colornum = params.data[3] + params.data[4] + params.data[5];
            if (colornum < 0) {
              return "rgb(0,255,0)";
            } else if (colornum > 0) {
              return "rgb(0,0,255)";
            } else {
              return "rgb(0,0,0)";
            }
          },
        },
        emphasis: {
          itemStyle: {
            color: "red",
          },
          label: {
            show: false,
          },
        },
      },
    ],
  };
}
// 初始化表
const initChart = () => {
  chart1 = init(chartRef1.value as HTMLElement);
  chart1.setOption(option1);
  chart2 = init(chartRef2.value as HTMLElement);
  chart2.setOption(option2);
  chart3 = init(chartRef3.value as HTMLElement);
  chart3.setOption(option3);
  chart4 = init(chartRef4.value as HTMLElement);
  chart4.setOption(option4);
};
// 监听窗口尺寸更改重绘图表
const resizeCharts = () => {
  chart1.resize()
  chart2.resize()
  chart3.resize()
  chart4.resize()
}
// 请求接口数据后处理
const setData = (data: any) => {
  dashdata1.value = data.dashdata1;
  dashdata2.value = data.dashdata2;
  dashdata3.value = data.dashdata3;
  dashdata4.value = data.dashdata4;
  setOptionsData(data)
}
// 页面渲染完成，请求数据
onMounted(async () => {
  let ret: any = await getData();
  if (ret.code == 20000) {
    setData(ret.data)
    initChart();
    // 监听窗口更改
    window.onresize = () => {
      resizeCharts();
    }
  } else {
    ElMessage.error(ret.msg);
  }
});

</script>

<style lang="scss">
.mainbox {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.panes {
  display: flex;
  justify-content: space-between;
  height: 13%;

  .panes-item {
    background-color: #fff;
    width: 23.4%;
    display: flex;
    justify-content: space-between;
    padding: 0 1.8vw;

    >div {
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }

    .panes-img-box {
      width: 22%;
      height: 100%;
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }

    .panes-data {
      font-weight: bold;
      text-align: right;
      font-size: 1.6vw;
    }

    .panes-label {
      text-align: right;
      font-size: 1vw;
    }
  }
}

.table {
  height: 39%;
  background-color: #fff;
}

.chart {
  height: 39%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #eee;

  >div {
    background-color: #fff;
    padding: 14px;
    box-sizing: border-box;
  }
}
</style>
